<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
			    width: 256px;
			    height: 256px;
			    border-bottom: 1px dashed #ccc;
			    text-align: justify;
				background-color: #00FFFF;
				
			}
			.box:before {
			    content: "";
			    line-height: 0;
			    height: 100%;
			}
			.box:after {
			    content: "";
			    display: inline-block;
			    width: 100%;
			}
			.bar {
			    display: inline-block;
			    width: 20px; height: 0;
				
			}
		</style>
	</head>
	<body>
		<div id="box" class="box"><i class="bar"></i>
		    <i class="bar"></i>
		    <i class="bar"></i>
		    <i class="bar"></i>
		</div>
		<p><button id="button">再增加一条数据</button></p>
		<script type="text/javascript">
			console.log(document.querySelector(".box").offsetHeight);
			if (document.querySelector) {
			    var eleBox = document.getElementById('box');
			    // 目前柱子元素和个数
			    var eleBars = document.querySelectorAll('#box > i');
			    var lenBar = eleBars.length;
			    if (eleBox && lenBar) {
			        for (var indexBar = 0; indexBar < lenBar; indexBar += 1) {
			            // 柱形图的柱子高度和背景色随机
			            eleBars[indexBar].style.height = Math.ceil(256 * Math.random()) + 'px';
			            eleBars[indexBar].style.backgroundColor = '#' + (Math.random() + '').slice(-6);
			        }
			    }
			
			    // 增加数据
			    var eleBtn = document.getElementById('button');
			    if (eleBtn && lenBar) {
			        eleBtn.onclick = function() {
			            // 随机高度和背景色
			            var height = Math.ceil(256 * Math.random()) + 'px';
			            var backgroundColor = '#' + (Math.random() + '').slice(-6);
			
			            // 创建柱子元素
			            var eleClone = eleBars[0].cloneNode();
			
			            eleClone.style.height = height;
			            eleClone.style.backgroundColor = backgroundColor;
			            
			            // 此处的字符替换为了兼容IE8下的演示效果
			            eleBox.innerHTML = eleBox.innerHTML.replace(/I><I/ig, 'I> <I') + ' ' + eleClone.outerHTML;
			
			            lenBar+=1;
			            // 最多10条数据
			            if (lenBar == 10) {
			                this.setAttribute('disabled', 'disabled');
			            }
			        };
			    }
			}
		</script>
	</body>
</html>
